<template>
	<tm-fullView>
		<tm-menubars :title="$t('个人信息')" iconColor="white"></tm-menubars>
		<tm-gap :gutter="30"></tm-gap>
		<view>
			<tm-listitem :padding="[40,30]" :margin="[0,0]" :round="0" :title="$t('头像')" :show-right-icon="true">
				<view slot="rightIcon">
					<tm-avatar @click="selectImage" :src="avatar" :size="80" ></tm-avatar>
				</view>
			</tm-listitem>
			<tm-gap :gutter="15"></tm-gap>
			<tm-listitem :padding="[40,30]" :margin="[0,0]" :round="0" :title="$t('昵称')" @click="showNickDialog=true" :value="userInfo.nickname" :show-right-icon="true"></tm-listitem>
			<tm-gap :gutter="15"></tm-gap>
			<tm-listitem :padding="[40,30]" :margin="[0,0]" :round="0" :title="$t('性别')" @click="showGenderSelect=true" :value="$t(userInfo.gender)" :show-right-icon="true"></tm-listitem>
			<tm-gap :gutter="15"></tm-gap>
			<tm-listitem :padding="[40,30]" :margin="[0,0]" :round="0" :title="$t('生日')" value="2000-09-19" :show-right-icon="true">
				<view slot="rightValue">
					<tm-calendar :show-nongli="false" @confirm="changeBirthday">
						<text  theme="bg-gradient-blue-accent">{{birthday}}</text>
					</tm-calendar>
				</view>
			</tm-listitem>
			<tm-gap :gutter="15"></tm-gap>
			<tm-listitem :padding="[40,30]" :margin="[0,0]" :round="0"  @click="showSignDialog=true" :title="$t('个人签名')" :value="userInfo.sign?userInfo.sign:$t('这家伙很懒')" :show-right-icon="true"></tm-listitem>
		</view>
		<tm-message ref="toast"></tm-message>
		<tm-dialog :input-val.sync="nickname" @confirm="setNickname" :placeholder="$t('请输入昵称')" :title="$t('修改昵称')" :confirmText="$t('确定')" :cancelText="$t('取消')" model="confirm" v-model="showNickDialog" theme="split"></tm-dialog>
		<tm-actionSheetMenu  @change="changeGender" v-model="showGenderSelect" :title="$t('选择性别')" :actions=" [ $t('男'),$t('女') ] "></tm-actionSheetMenu>
		<tm-dialog :input-val.sync="sign" @confirm="setSign" :placeholder="$t('请输入个性签名')" :title="$t('修改签名')" :confirmText="$t('确定')" :cancelText="$t('取消')" model="confirm" v-model="showSignDialog" theme="split"></tm-dialog>
		<!-- <tm-avatarCrop :isRatio="isRatio" :isArc="isArc" v-if="show" @confirm="cof" @cancel="show=false"></tm-avatarCrop> -->
	</tm-fullView>
</template>

<script>
	import UserApi from '@/api/user.js'
	export default {
		data() {
			return {
				avatrUrl:'',
				src:'',
				show:false,
				isArc:false,
				isRatio:false,
				width:300,
				height:300,
				showNickDialog:false,
				nickname:'',
				showGenderSelect:false,
				sign:'',
				showSignDialog:false
			}
		},
		onLoad() {
			this.avatrUrl=this.avatar
		},
		computed:{
			birthday(){
				return this.userInfo.birthday?uni.$tm.dayjs(this.userInfo.birthday).format('YYYY-MM-DD'):this.$t('请设置生日')
			}
		},
		methods: {
			selectImage(){
				let self=this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.showLoading({
							title:self.$t('正在上传')
						})
						UserApi.uploadAvatar({filePath:res.tempFilePaths[0]},function(res){
							console.log("上传",res)
							uni.hideLoading()
							if(res.code==200){
								uni.showToast({
									title:self.$t("上传成功")
								})
								self.$tm.vx.actions('user/getUserInfo')
							}else{
								uni.showToast({
									title:self.$t("上传失败"),
									icon:'error'
								})
							}
						})
					}
				});
			},
			cof() {
				let self=this
				this.show=false;
				const {width,height,src} = arguments[0];
				// console.log(src)
				// this.src=src
				// this.width =width /( uni.upx2px(750)/750)
				// this.height = height / (uni.upx2px(750)/750)
				// #ifdef APP-PLUS
					uni.showLoading({
						title:self.$t('正在上传')
					})
					UserApi.uploadAvatar({filePath:src},function(res){
						console.log("上传",res)
						uni.hideLoading()
						if(res.code==200){
							uni.showToast({
								title:self.$t("上传成功")
							})
							self.$tm.vx.actions('user/getUserInfo')
						}else{
							uni.showToast({
								title:self.$t("上传失败"),
								icon:'error'
							})
						}
					})
				// #endif
				
			},
			setNickname(nickname){
				let self=this
				let data={nickname}
				self.$refs.toast.show({model:'load',label:self.$t('正在更新')})
				UserApi.updateUser(data).then(res=>{
					self.$refs.toast.hide()
					if(res.code==200){
						uni.showToast({
							title:self.$t("更新成功")
						})
						self.$tm.vx.actions('user/getUserInfo')
					}else{
						uni.showToast({
							title:self.$t("更新失败"),
							icon:'error'
						})
					}
				})
			},
			setSign(sign){
				let self=this
				let data={sign}
				self.$refs.toast.show({model:'load',label:self.$t('正在更新')})
				UserApi.updateUser(data).then(res=>{
					self.$refs.toast.hide()
					if(res.code==200){
						uni.showToast({
							title:self.$t("更新成功")
						})
						self.$tm.vx.actions('user/getUserInfo')
					}else{
						uni.showToast({
							title:self.$t("更新失败"),
							icon:'error'
						})
					}
				})
			},
			changeGender(e){
				let self=this
				let data={gender:e.index==0?'男':'女'}
				self.$refs.toast.show({model:'load',label:self.$t('正在更新')})
				UserApi.updateUser(data).then(res=>{
					self.$refs.toast.hide()
					if(res.code==200){
						uni.showToast({
							title:self.$t("更新成功")
						})
						self.$tm.vx.actions('user/getUserInfo')
					}else{
						uni.showToast({
							title:self.$t("更新失败"),
							icon:'error'
						})
					}
				})
			},
			changeBirthday(e){
				console.log(e)
				let self=this
				let data={
					birthday:e.year+"-"+e.month+"-"+e.day
				}
				self.$refs.toast.show({model:'load',label:self.$t('正在更新')})
				UserApi.updateUser(data).then(res=>{
					self.$refs.toast.hide()
					if(res.code==200){
						uni.showToast({
							title:self.$t("更新成功")
						})
						self.$tm.vx.actions('user/getUserInfo')
					}else{
						uni.showToast({
							title:self.$t("更新失败"),
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style>

</style>
